<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <title>胡佳慧-2021硕士应届-面试前端开发</title>
  <link rel="stylesheet" href="style.css">
  <style>
    *, *::before, *::after {
      box-sizing: border-box;
    }

    ul, li {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
      border-bottom: 1px dashed #888888;
      color: #000;

    }

    a:hover {
      color: #eaaf00;
    }
    body {
      background: #f6f6f6;
      margin: 30px 0;
    }

    article {
      width: 900px;
      min-height: 29.7cm;
      background-color: #f1f1f1 !important;
      margin: 0 auto;
      overflow: hidden;
      border: 1px solid #d9d9d9;
    }

    strong {
      color: #fb8b05;
    }

    @media (max-width: 580px) {
      article{
        width: 100vw;
      }

      body {
        margin: 0;
      }
    }
  </style>

  <style media="print">
    body {
      margin: 0;
    }

    article {
      width: 100%;
      border: none;
      /*min-height: 29.7cm;*/
    }

    .wrapper-content.distance {
      margin-bottom: 20px;
    }

    .wrapper-content.distance > div > img {
      display: none;
    }

    .left {
      width: 250px;
    }

    .right {
      width: calc(100% - 250px);
      padding: 30px 20px 5px 20px;
    }

    .side-name {
      margin-bottom: 5px;
    }

    .wrapper-right-info {
      margin-bottom: 1px;
    }

    .wrapper-content > .title {
      margin-bottom: 10px;
    }

    .content-project > li {
      line-height: 1.4 ;
    }

    ul > li {
      margin-bottom: .4em;
    }

    .hide {
      display: none;
    }

    .down {
      display: block;
      padding: 10px 30px;
      background-color: #fff;
    }

    hr {
      margin-bottom: 2em;
      width: 90%;
      height: 1px;
      border: none;
      background-color: #ffffff;
    }

    .wrapper-content > div {
      margin-bottom: 13px;
    }

    .wrapper-content > div >div> a {
      border: 1.5px dotted #eaaf00;
      padding: 1px 6px;
      border-radius: 4px;
      position: relative;
      right: 0;
      top: 0;
      margin-right: 5px;
    }
  </style>
  <style type="text/css">
    .icon {
      width: 1.2em; height: 1.2em;
      vertical-align: -0.2em;
      fill: #eaaf00;
      overflow: hidden;
      margin-right: .2em;
    }
  </style>
</head>
<body>
  <article>
    <section class="left">
      <!-- image -->
      <div class="wrapper-left image-left">
        <div class="top">
          <span class="span-title">胡佳慧</span>
        </div>
        <div>目标岗位：前端开发工程师</div>
        <div class="avatar">
          <img src="./src/222.jpg" alt="photo">
        </div>
      </div>
      <!-- information -->
      <div class="wrapper-info">
        <div class="wrapper-heading">
          <span>基本信息</span>
        </div>
        <div class="wrapper-content">
          <ul>
            <li>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#i-age"></use>
              </svg>
              <span>年&#12288;&#12288;龄：25岁</span>
            </li>
            <li>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#i-school"></use>
              </svg>
              <span>毕业院校：中国计量大学</span>
            </li>
            <li>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#i-major"></use>
              </svg>
              <span>专&#12288;&#12288;业：控制工程</span>
            </li>
            <li>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#i-graduate"></use>
              </svg>
              <span>学&#12288;&#12288;历：硕士</span>
            </li>
            <li>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#i-english"></use>
              </svg>
              <span>英&#12288;&#12288;语：CET六级/BEC中级</span>
            </li>
            <li>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#i-position"></use>
              </svg>
              <span>现&#12288;&#12288;居：杭州</span>
            </li>
            <li>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#i-position"></use>
              </svg>
              <span>前端经验：1年</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="wrapper-info">
        <div class="wrapper-heading">
          <span>联系方式</span>
        </div>
        <div class="wrapper-content">
          <ul>
            <li>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#i-phone"></use>
              </svg>
              <span> <a href="tel:18255185821">18255185821</a></span>
            </li>
            <li>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#i-mail"></use>
              </svg>
              <span><a href="mailto:paulahu1995@gmail.com">paulahu1995@gmail.com</a></span>
            </li>
          </ul>
        </div>
      </div>
      <div class="wrapper-info">
        <div class="wrapper-heading">
          <span>了解更多</span>
        </div>
        <div class="wrapper-content">
          <ul>
            <li class="link">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#i-github"></use>
              </svg>
              <div class="wrapper-a">
                <a href="https://github.com/Paulahu" target="_blank">Github主页</a>
                <div>(近半年有250+次提交)</div>
              </div>
            </li>
            <li class="link">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#i-zhihu"></use>
              </svg>
              <div class="wrapper-a">
                <a href="https://www.zhihu.com/people/paula-hu/posts" target="_blank">知乎主页</a>
                <div>(目前已有630+个关注者)</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="wrapper-info">
        <div class="wrapper-heading">
          <span>精选博客</span>
        </div>
        <div class="wrapper-content">
          <ul>
            <li class="link">
              <div class="wrapper-a">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#i-child"></use>
                </svg>
                <a href="https://zhuanlan.zhihu.com/p/143933911" target="_blank">你真的理解Vue的数据响应式吗</a>
              </div>
            </li>
            <li class="link">
              <div class="wrapper-a">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#i-child"></use>
                </svg>
                <a href="https://zhuanlan.zhihu.com/p/113800684" target="_blank">一个例子讲清楚函数声明和函数表达式</a>
              </div>
            </li>
            <li class="link">
              <div class="wrapper-a">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#i-child"></use>
                </svg>
                <a href="https://www.zhihu.com/people/paula-hu/posts" target="_blank">JS函数的执行时机</a>
              </div>
            </li>
            <li class="link">
              <div class="wrapper-a">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#i-child"></use>
                </svg>
                <a href="https://zhuanlan.zhihu.com/p/112560557" target="_blank">深入理解层叠上下文（2）</a>
              </div>
            </li>
            <li class="link">
              <div class="wrapper-a">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#i-child"></use>
                </svg>
                <a href="https://zhuanlan.zhihu.com/p/111092441" target="_blank">深入理解层叠上下文（1）</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>

    <section class="right">
      <!-- name -->
      <div class="wrapper-name">
        <span>胡佳慧</span>
      </div>
      <div class="side-name">目标岗位：前端开发工程师</div>
      <!-- introduction-->
      <div class="wrapper-right-info">
        <div class="wrapper-heading">
          <span>教育经历</span>
        </div>
        <div class="wrapper-content">
          <ul>
            <li class="content-li">
              <div class="item">
                <div>硕士阶段</div>
                <div>本科阶段</div>
              </div>
              <div class="item">
                <div class="str">中国计量大学</div>
                <div class="str">安徽建筑大学</div>
              </div>
              <div class="item control">
                <div>控制工程</div>
                <div>建筑电气与智能化</div>
              </div>
              <div class="item">
                <div>2018.9-2021.6</div>
                <div>2014.9-2018.6</div>
              </div>
            </li>
            <li class="content-li">
              <div class="content-side">
                研究生期间专业排名前10%、多次获得校一等奖学金、校优秀学生干部等荣誉。
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="wrapper-right-info">
        <div class="wrapper-heading">
          <span>技能清单</span>
        </div>
        <div class="wrapper-content">
          <ul class="content-project">
            <li>熟悉 <strong>HTML5 & CSS3</strong>  ，能够使用HTML5标签编写 <strong>语义化的页面</strong> 。</li>
            <li>掌握 CSS3 <strong>过渡效果</strong> 、 <strong>响应式</strong> 等常用技术, 深入理解 <strong>层叠上下文</strong> 。</li>
            <li>熟悉原生 JavaScript 和部分 ES6 新特性。</li>
            <li>熟悉 <strong>React</strong> 框架及其常用功能，理解其重要概念和工具， 如常用 <strong>Hooks</strong> 、 <strong>React Router</strong> 等。</li>
            <li>了解 <strong>Vue</strong>  框架及其常用功能，理解其重要概念，如 <strong>生命周期</strong> 、 <strong>数据响应式</strong>  等。</li>
            <li>掌握 <strong>Git/Github</strong>  工作部署流程， 会使用 Git 进行版本控制</li>
            <li>了解 <strong>HTTP</strong> 协议及浏览器渲染过程</li>
            <li>在项目中使用过 <strong>Webpack</strong>  和 <strong>Parcel</strong>  打包工具，了解前端工程化构建流程</li>
            <li>持续关注新技术，积极参与线下沙龙交流活动（参加了 <strong>“前端早早聊”</strong> VIP交流群， 参与了“前端女性职业规划经验分享交流会”）</li>
            <li><strong>英文阅读能力较强</strong>（BEC中级、CET六级），能够流畅阅读英文文档，能通过Stack Overflow解决问题，有总结书写笔记和博客的习惯。</li>
          </ul>
        </div>
      </div>
      <div class="wrapper-right-info">
        <div class="wrapper-heading">
          <span>项目经历</span>
        </div>
        <div class="wrapper-content distance">
          <div class="title">
            <span>1. grape-UI</span>
            <span>一套基于Vue的组件库(不断更新中)</span>
          </div>
          <div>
            <img src="src/grape-ui.png" alt="grape-ui">
          </div>
          <div>
            【项目介绍】
            <ul class="content-project">
              <li >该项目是参考了Element UI组件库，做的一套基于 <strong>Vue</strong> 的简易 UI 组件库; 目前已支持 Button 、 Input 、 Grid 组件，其他基本组件如 Layout 、Toast 、Tabs  、Pop-over 、Collapse 等目前正在开发中。</li>
              <li>每个组件经 <strong>需求分析</strong> 、画 <strong>用例图</strong> 或时序图、利用 <strong>Axure RP</strong> 设计视觉稿后，再开始开发；每开发完一个组件就会用 <strong>Mocha+chai</strong> 进行单元测试，并用 <strong>TravisCI</strong> 持续集成，
                保证每个组件的质量；再通过 <strong>npm link</strong> 协助测试组件是否能够正常使用；最终制作一个基于 <strong>Vuepress</strong> 来开发一个官方文档，并将组件打包发布到 <strong>npm</strong> ，供其他开发者使用。</li>
              <li>在这一过程中我也遇到了一些问题，比如我在写 grid 组件时，如何设置 grid 间隙 gutter 的问题，给父组件设置 gutter 后，想做到不再对子组件重复设置，因此我研究了父子组件 created 和 mounted 钩子的执行顺序来解决了这个问题。</li>
              <li>完成该项目使我对 Vue 的常用特性更加熟悉, 同时,也对 <strong>前端工程化</strong>  的流程以及 <strong>单元测试</strong>  的重要性有进一步了解。</li>
            </ul>
          </div>
          <div>
            【技术栈】
            <ul class="content-project">
              <li>Vue.js + SCSS + Mocha + Chai +  TravisCI + npm scripts +  Parcel + Vuepress </li>
            </ul>
          </div>
          <div>
            <a href="https://paulahu.gitee.io/grape/" target="_blank">效果预览</a>
            <a href="https://github.com/Paulahu/grape-UI" target="_blank">项目源码</a>
          </div>
        </div>
        <div class="wrapper-content distance hide">
          <div class="title">
            <span>2. EPIC IMAGE</span>
            <span>一款用于生成图片在线链接的图床工具</span>
          </div>
          <div>
            <img src="src/epic.png" alt="react-epic">
          </div>
          <div>
            【项目介绍】
            <ul class="content-project">
              <li>该项目是一个基于 <strong>React</strong> 的在线图床工具，使用到了 <strong>Antd</strong> 组件， 用户可以定制图片大小、浏览已上传的图片。核心功能包括：注册、登录、上传图片、图片尺寸定制、上传历史展示和删除等。</li>
              <li>本项目使用以 <strong>react-create-app</strong> 为基础创建项目模板，使用 <strong>styled-components</strong> 来加速React开发, 通过 <strong>React-Router</strong> 来实现路由的跳转，
                使用 <strong>Mobx</strong> 进行状态管理， 后台数据从 <strong>LeanCloud</strong> 平台获取，  用 <strong>Promise</strong> 封装接口供内部模块使用。  </li>
            </ul>
          </div>
          <div>
            【技术栈】
            <ul class="content-project">
              <li>react-create-app + styled-components + React-Router + Mobx + Antd + LeanCloud</li>
            </ul>
          </div>
          <div>
            <a href="https://paulahu.gitee.io/react-epic-project/build/index.html#/" target="_blank">PC端预览</a>
            <a href="https://github.com/Paulahu/react-epic-project" target="_blank">项目源码</a>
          </div>
        </div>
        <div class="wrapper-content distance hide">
          <div class="title">
            <span>3. Personal Navsite</span>
            <span>超实用、抽象风的导航网站</span>
          </div>
          <div>
            <img src="src/navsite.png" alt="grape-ui">
          </div>
          <div>
            【项目介绍】
            <ul class="content-project">
              <li>为了更便于管理常用的站点，提高工作效率，于是我是使用 <strong>jQuery</strong> , 借鉴了Chrone浏览器的设计风格，在此基础上加以改进，设计并实现了该产品。</li>
              <li>网站的标题使用了 <strong>animation</strong> 属性设计出闪烁效果，还使用了CSS的 <strong>自定义属性</strong>管理样式变量 。核心 JavaScript 部分使用了 <strong>hashMap</strong> 来表示数据结构，
                使用 <strong>localStorage</strong> 将数据存储到本地，页面首次加载时执行主函数，再根据用户不同的行为执行对应的函数。</li>
              <li>这个项目让我意识到在写代码前，一定要想好、<strong>把逻辑理清楚再动手写</strong> ；其次，要对“烂代码” <strong>零容忍</strong>   ，出现过多重复要及时 <strong>重构</strong>  ，这样在进行合作开发时才能保证高质高效完成任务。</li>
            </ul>
          </div>
          <div>
            【技术栈】
            <ul class="content-project">
              <li>jQuery + Javascript + CSS + npm + Parcel</li>
            </ul>
          </div>
          <div>
            <a href="https://paulahu.gitee.io/personal-navsite/dist/index.html" target="_blank">效果预览</a>
            <a href="https://github.com/Paulahu/Personal-navSite" target="_blank">项目源码</a>
          </div>
        </div>
<!--        <div class="wrapper-content distance hide">-->
<!--          <div class="title">-->
<!--            <span>4. 哒哒翻译</span>-->
<!--            <span>一个简洁、易用的翻译软件(小程序)</span>-->
<!--          </div>-->
<!--          <div>-->
<!--            <img src="src/translate.png" alt="react-epic">-->
<!--          </div>-->
<!--          <div>-->
<!--            【项目介绍】-->
<!--            <ul class="content-project">-->
<!--              <li>该项目是使用原生 <strong>小程序</strong> 实现的一个翻译软件，用于帮助用户学习英语和查阅生词，目前已在微信上线。</li>-->
<!--              <li>用户输入待翻译的中文，选择语种后就能看到翻译后的文字。目前仅支持中文翻译到其他语种，后期会继续完善升级。</li>-->
<!--              <li>这个项目让我对微信小程序的开发流程更加熟悉，了解了如何查找和使用外部接口和资源。</li>-->
<!--            </ul>-->
<!--          </div>-->
<!--          <div>-->
<!--            <a >扫码浏览</a>-->
<!--            <a href="https://github.com/Paulahu/quick-translate" target="_blank">项目源码</a>-->
<!--            <img src="src/translate-code.png" alt="" style="width: 10em;display: block;margin-top: 1em; margin-left: auto;margin-right: auto">-->
<!--          </div>-->
<!--        </div>-->
      </div>
      <div class="wrapper-right-info hide">
        <div class="wrapper-heading">
          <span>开源项目</span>
        </div>

        <div class="wrapper-content distance">
          <div class="title">
            <span>1. Twinkling Rainbow</span>
            <span>一个CSS3动效</span>
          </div>
          <div>
            <img src="src/rainbow.gif" alt="react-epic">
          </div>
          <div>
            【项目介绍】
            <ul class="content-project">
              <li>这个动画是我在学习 <strong>CSS3</strong> 的相关属性时做的一个动效。该作品的实现思路是：用若干个级联的div组成HTML部分，
                样式部分使用 <strong>子元素选择器</strong> 对每层div进行样式设计，用 <strong>animation</strong> 属性来实现颜色渐变效果，设置 <strong>animation-delay</strong> 来实现波浪效果。</li>
            </ul>
          </div>
          <div>
            <a href="https://paulahu.gitee.io/rainbow_demo/" target="_blank">效果预览</a>
            <a href="https://github.com/Paulahu/Rainbow_demo" target="_blank">项目源码</a>
          </div>
        </div>
        <div class="wrapper-content distance">
          <div class="title">
            <span>2. Write a DOM Tool</span>
            <span>学习DOM时封装的一个DOM库</span>
          </div>
          <div><strong></strong>
            【项目介绍】
            <ul class="content-project">
              <li>这是我在学习DOM的时候，受 jQuery 封装风格的启发，自己封装的一组API, 目前支持增、删、改、查主要的功能。</li>
            </ul>
          </div>
          <div>
            <a href="https://github.com/Paulahu/write-a-dom-tool" target="_blank">项目源码</a>
          </div>
        </div>
      </div>
    </section>

    <section class="down">

        <!-- introduction-->
      <hr>
        <div class="wrapper-right-info">
          <div class="wrapper-content distance">
            <div class="title">
              <span style="margin-top: 20px">2. EPIC IMAGE</span>
              <span>一款用于生成图片在线链接的图床工具</span>
              <div>
                <a href="https://paulahu.gitee.io/react-epic-project/build/index.html#/" target="_blank">PC端预览</a>
                <a href="https://github.com/Paulahu/react-epic-project" target="_blank">项目源码</a>
              </div>
            </div>
            <div>
              <img src="src/epic.png" alt="react-epic">
            </div>
            <div>
              【项目介绍】
              <ul class="content-project">
                <li>该项目是一个基于 <strong>React</strong> 的在线图床工具，使用到了 <strong>Antd</strong> 组件， 用户可以定制图片大小、浏览已上传的图片。核心功能包括：注册、登录、上传图片、图片尺寸定制、上传历史展示和删除等。</li>
                <li>本项目使用以 <strong>react-create-app</strong> 为基础创建项目模板，使用 <strong>styled-components</strong> 来加速React开发, 通过 <strong>React-Router</strong> 来实现路由的跳转，
                  使用 <strong>Mobx</strong> 进行状态管理， 后台数据从 <strong>LeanCloud</strong> 平台获取，  用 <strong>Promise</strong> 封装接口供内部模块使用。  </li>
              </ul>
            </div>
            <div>
              【技术栈】
              <ul class="content-project" style="display: inline-block">
                <li style="list-style: none; margin-left: 0">react-create-app + styled-components + React-Router + Mobx + Antd + LeanCloud</li>
              </ul>
            </div>

          </div>
          <div class="wrapper-content distance">
            <div class="title">
              <span>3. Personal Navsite</span>
              <span>超实用、抽象风的导航网站</span>
              <div>
                <a href="https://paulahu.gitee.io/personal-navsite/dist/index.html" target="_blank">效果预览</a>
                <a href="https://github.com/Paulahu/Personal-navSite" target="_blank">项目源码</a>
              </div>
            </div>
            <div>
              <img src="src/navsite.png" alt="grape-ui">
            </div>
            <div>
              【项目介绍】
              <ul class="content-project">
                <li>为了更便于管理常用的站点，提高工作效率，于是我是使用 <strong>jQuery</strong> , 借鉴了Chrone浏览器的设计风格，在此基础上加以改进，设计并实现了该产品。</li>
                <li>网站的标题使用了 <strong>animation</strong> 属性设计出闪烁效果，还使用了CSS的 <strong>自定义属性</strong>管理样式变量 。核心 JavaScript 部分使用了 <strong>hashMap</strong> 来表示数据结构，
                  使用 <strong>localStorage</strong> 将数据存储到本地，页面首次加载时执行主函数，再根据用户不同的行为执行对应的函数。</li>
                <li>这个项目让我意识到在写代码前，一定要想好、<strong>把逻辑理清楚再动手写</strong> ；其次，要对“烂代码” <strong>零容忍</strong>   ，出现过多重复要及时 <strong>重构</strong>  ，这样在进行合作开发时才能保证高质高效完成任务。</li>
              </ul>
            </div>
            <div >
              【技术栈】
              <ul class="content-project" style="display: inline-block">
                <li style="list-style: none; margin-left: 0">jQuery + Javascript + CSS + npm + Parcel</li>
              </ul>
            </div>

          </div>
          <div class="wrapper-content distance">
            <div class="title">
              <span>4. 哒哒翻译</span>
              <span>一个简洁、易用的翻译软件(小程序)</span>
              <div>
                <a >扫码浏览</a>
                <a href="https://github.com/Paulahu/quick-translate" target="_blank">项目源码</a>
              </div>
            </div>
            <div>
              <img src="src/translate.png" alt="react-epic">
            </div>
            <section style="display: inline-flex">
              <div>
                【项目介绍】
                <ul class="content-project">
                  <li>该项目是使用原生 <strong>小程序</strong> 实现的一个翻译软件，用于帮助用户学习英语和查阅生词，目前已在微信上线。</li>
                  <li>用户输入待翻译的中文，选择语种后就能看到翻译后的文字。目前仅支持中文翻译到其他语种，后期会继续完善升级。这个项目让我对微信小程序的开发流程更加熟悉，了解了如何查找和使用外部接口和资源。</li>
                </ul>
              </div>
              <div>
                <img src="src/translate-code.png" alt="" style="width: 8em;display: block;margin: 0 2em">
              </div>
            </section>

          </div>
        </div>
        <div class="wrapper-right-info">
          <div class="wrapper-heading">
            <span>开源项目</span>
          </div>

          <div class="wrapper-content distance">
            <div class="title">
              <span>1. Twinkling Rainbow</span>
              <span>一个CSS3动效</span>
              <div>
                <a href="https://paulahu.gitee.io/rainbow_demo/" target="_blank">效果预览</a>
                <a href="https://github.com/Paulahu/Rainbow_demo" target="_blank">项目源码</a>
              </div>
            </div>
            <div>
              <img src="src/rainbow.gif" alt="react-epic">
            </div>
            <div>
              【项目介绍】
              <ul class="content-project">
                <li>这个动画是我在学习 <strong>CSS3</strong> 的相关属性时做的一个动效。该作品的实现思路是：用若干个级联的div组成HTML部分，样式部分使用 <strong>子元素选择器</strong> 对每层div进行样式设计，
                  用 <strong>animation</strong> 属性来实现颜色渐变效果，设置 <strong>animation-delay</strong> 来实现波浪效果。</li>
              </ul>
            </div>

          </div>
          <div class="wrapper-content distance">
            <div class="title">
              <span>2. Write a DOM Tool</span>
              <span>学习DOM时封装的一个DOM库</span>
              <div>
                <a href="https://github.com/Paulahu/write-a-dom-tool" target="_blank">项目源码</a>
              </div>
            </div>
            <div><strong></strong>
              【项目介绍】
              <ul class="content-project">
                <li>这是我在学习DOM的时候，受 jQuery 封装风格的启发，自己封装的一组API, 目前支持增、删、改、查主要的功能。</li>
              </ul>
            </div>

          </div>
        </div>
      </section>
  </article>

  <script src="//at.alicdn.com/t/font_1957661_wp0jqj99o2.js"></script>
</body>
</html>